<template>
  <section id="default">
    <div style='padding-bottom:50px;'>
        <!-- <div v-if='indexData.toIcon'>
            <img :src="" alt="" width='100%'>
        </div> -->
        <div class="swiper-container" v-if='indexData.toIcon'>
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for='(val,index) in indexData.toIcon' :key='index'>
                    <img :src="val"  width="100%" height='150px'>
                </div>
            </div>
            <div class="swiper-scrollbar" style='height:2px;'></div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for='(val,index) in indexData.broadcastIcon' :key='index'>
                    <img :src="val"  width="100%" height='150px'>
                </div>
            </div>
            <div class="swiper-scrollbar" style='height:2px;'></div>
        </div>
        <div style='margin:15px 0;'>
            <!-- 这是一个类型 -->
            <div v-for="(val,index) in indexData.arrVos" :key='index'>
                <div>
                    <img :src="JSON.parse(val.title)[0]" width='100%' height='50'>
                </div>
                <el-row>
                    <!-- 这是一个商品 -->
                    <el-col :span='12' v-for="(goods,index) in val.goodsArr" :key='index'>
                        <div style='width:85%;padding-bottom:20px;margin:10px auto;' @click='inGoods(goods.id)'>
                            <div>
                                <img :src="JSON.parse(goods.icon)[0]" width='100%' >
                            </div>
                            <p style='margin:8px 0 10px;letter-spacing:2px;'>{{goods.name}}</p>
                        </div>
                    </el-col>
                    <!-- 这是一个商品 -->
                    
                </el-row>
            </div>
            <!-- 这是一个类型 -->

        </div>
    </div>
    <!-- 这两个层都是控制左边导航 -->
    <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/>
    <transition
        enter-active-class='animated bounceInLeft'
        leave-active-class='animated bounceOutLeft'
    >
        <Left v-if='controlModel'  @changeType='changeType'/>
    </transition>
    <!-- 这两个层都是控制左边导航 -->

    <!-- 这一个层是聊天二维码 -->
    <transition
        enter-active-class='animated fadeIn'
        leave-active-class='animated fadeOut'
    >
        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
    </transition>
    <!-- 这一个层是聊天二维码 -->
    <Bottom @openLeft='controlModel=true' @openQr='controlQr=true' @car='goOrder'/>
  </section>
</template>
<script>
import Left from '@/components/left.vue';
import Bottom from '@/components/bottom.vue';
import CloseLeft from '@/components/close-left.vue';
import Qr from '@/components/qr.vue';
import {AJAX,GET_AJAX,INDEX_DATA,_layer,GOODS_INFO,SHOU} from '@/comm.js';
export default {
  data(){
    return ({
      
      controlModel:false,    //控制左边导航
      controlQr:false,        //控制二维码
      indexData:{}
    });
  },
  components:{
    Left,
    Bottom,
    CloseLeft,
    Qr,
  },
  created(){
    $.post(INDEX_DATA,{

    },(data)=>{ 
        console.log(data);
        if(data.state){
            data.data.broadcastIcon=JSON.parse(data.data.broadcastIcon);
            data.data.toIcon=JSON.parse(data.data.toIcon);
            this.indexData=data.data;
        }else{
            _layer(data.message);
        }
    });
    
    //授权
    $.get(SHOU,(data)=>{
        console.log(data)
    })
  },
  methods:{
    changeType(val){
        console.log(val);
    },
    inGoods(id){
        this.$router.push({path:'/goodsInfo',query:{id:id}});
    },
    //去我的订单
    goOrder(){
        this.$router.push({path:'/orderList'});
    }
  },
  mounted(){
    setTimeout(function(){
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
    },300);
  }
}
</script>
<style scoped>
   /* .fixed-bottom{
        position: fixed;
        width: 100%;
        height: 50px;
        bottom:0;
        background: #183242;
    }
    .fixed-bottom .icon{
        width: 100%;
        height:100%;
        font-size:20px;
        line-height: 50px;
        text-align: center;
        color:white;
    }
    .fixed-bottom .shopping-car{
        background: red;
    }
    .close-left{
        position: fixed;
        top:0;
        right: 0;
        bottom:0;
        left:0;
        background: rgba(0,0,0,0);
    }
    .left-type{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:2;
        width:150px;
        background: rgba(0,0,0,.7);
    }
    .left-type .left-li{
        padding:15px 0;
        font-size:16px;
        text-align: center;
        color:white;
    }*/
    
</style>
